<template>
	<div>
		<div class="list-box">
			<div class="pannel-title">
				<div>通报管理</div>
				<span v-if="timer">上次更新时间：{{ timer }}</span>
			</div>
			<div class="filter-box">
				<a-select v-model:value="filter.inspectLevel" @change="handleChange" style="width: 120px; margin-right: 15px">
					<a-select-option value="">全部</a-select-option>
					<a-select-option value="Medium">普通单位</a-select-option>
					<a-select-option value="High">重点单位</a-select-option>
				</a-select>
				<a-select v-model:value="filter.status" @change="handleChange" style="width: 120px; margin-right: 15px">
					<a-select-option value="">全部</a-select-option>
					<a-select-option v-if="roleId == 1" value="UnReported">未通报</a-select-option>
					<a-select-option value="Reported">待签收</a-select-option>
					<a-select-option value="Handled">待反馈</a-select-option>
					<a-select-option value="Uploaded">待确认</a-select-option>
					<a-select-option value="Confirmed">已完成</a-select-option>
				</a-select>
				<a-select v-model:value="filter.natureTypeId" @change="handleChange" style="width: 120px; margin-right: 15px">
					<a-select-option value="">全部</a-select-option>
					<a-select-option v-for="item in natureTypeIds" :key="item" :value="item.id">{{ item.name }}</a-select-option>
				</a-select>
				<a-select v-if='roleId == 1' v-model:value="filter.psId" @change="handleChange" style="width: 120px;margin-right:15px;">
					<a-select-option value="">全部</a-select-option>
					<a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
				</a-select>
				<a-input-search v-model:value="filter.keywords" @search="handleChange" placeholder="请输入单位名称" style="width: 200px" />
				<span style="margin-left: 10px; font-weight: bold; font-size: 15px">
					处置反馈模板:
					<a href="http://58.221.115.202:8085/reportFile/隐患清零确认书.docx">隐患清零确认书.doc</a>
				</span>
				<!-- <span style="margin-left:10px;font-weight: bold;font-size: 15px;">处置反馈模板: <a :href="user.reportFileTemplate">隐患清零确认书.doc</a></span> -->
				<!-- <a class="download-btn"><img src="@/assets/images/icon-download.png" /><span>下载</span></a> -->
			</div>
			<div class="data-table">
				<a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
					<template #severity="{ text }">
						<a-tag color="#4687FF" v-if="text === 'Low'">低危</a-tag>
						<a-tag color="#FFD966" v-else-if="text === 'Medium'">中危</a-tag>
						<a-tag color="#FC890C" v-else-if="text === 'High'">高危</a-tag>
					</template>
					<template #vulnType="{ text }">
						<span>
							<a-tag v-if="text === 'Sys'">系统漏洞</a-tag>
							<a-tag v-else-if="text === 'App'">应用漏洞</a-tag>
							<a-tag v-else>漏洞</a-tag>
						</span>
					</template>
					<template #status="{ record }">
						<span v-if="roleId == 1">
							<span class="UnReported" v-if="record.status === 'UnReported'">
								<a-button size="small" type="primary" @click="tongbao(record.id)" style="background: #fe4e50; border: none">
									<img src="@/assets/images/cz-tb.png" />
									通报
								</a-button>
							</span>
							<span class="span-circle Reported" v-else-if="record.status === 'Reported'">待签收</span>
							<span class="span-circle Handled" v-else-if="record.status === 'Handled'">待反馈</span>
							<span class="Uploaded" v-if="record.status === 'Uploaded'">
								<a-button size="small" type="primary" @click="sure(record.id)" style="background: #15d8bf; border: none">
									<img src="@/assets/images/cz-qr.png" />
									确认
								</a-button>
								<a-button size="small" type="primary" @click="del(record)" style="background: red; border: none; margin-left: 10px">删除反馈</a-button>
							</span>
							<span class="span-circle Confirmed" v-if="record.status === 'Confirmed'">已完成</span>
						</span>
						<span v-if="roleId != 1">
							<span class="Reported" v-if="record.status === 'Reported'">
								<a-button size="small" type="primary" @click="chuli(record.id)" style="background: #fcac2e; border: none">
									<img src="@/assets/images/cz-cl.png" />
									签收
								</a-button>
							</span>
							<!-- <span class="Handled" v-else-if="record.status === 'Handled'"> -->
							<span class="Handled" v-else-if="record.status === 'Handled'">
								<a-button size="small" type="primary" @click="upload(record)" style="background: #4687ff; border: none">
									<img src="@/assets/images/cz-sc.png" />
									反馈
								</a-button>
							</span>
							<span class="span-circle Uploaded" v-if="record.status === 'Uploaded'">
								待确认
								<a-button size="small" type="primary" @click="del(record)" style="background: red; border: none; margin-left: 10px">删除反馈</a-button>
							</span>
							<span class="span-circle Confirmed" v-if="record.status === 'Confirmed'">已完成</span>
						</span>
					</template>
					<template #reportDoc="{ record }">
						<a v-if="record.reportDoc" :href="record.reportDoc" target="_blank" class="forget">整改通知书{{ record.reportTime }}</a>
						<span v-else class="forget">--</span>
					</template>
					<template #reportFile="{ record }">
						<template v-if="record.reportFile">
						<a style="display:block;" v-for="(item,index) in record.reportFile.split(',')" :key="index" :href="item" target="_blank" class="forget">{{ item.slice(item.lastIndexOf("/")+1) }}</a>
						</template>
						<span v-else class="forget">--</span>
					</template>
				</a-table>
				<a-modal v-model:visible="visible" :maskClosable="false" :afterClose="closeModal">
					<h3>上传反馈文件</h3>
					<div class="upload-dialog">
						<div class="upload-file-list">
							<div class="file-item" v-for="(item,index) in fileList" :key="index">
								<img v-if="['.jpg','.jpeg','.png','.gif'].indexOf(item.fileType)!== -1" :src="item.filePath" />
								<img v-else src="@/assets/images/icon-file.png" />
								<p>{{item.name}}</p>
								<div>
									<a v-if="['.jpg','.jpeg','.png','.gif'].indexOf(item.fileType)!== -1" :href="item.filePath" target="_blank"><EyeOutlined /></a>
									<a v-else :href="item.filePath" target="_blank"><DownloadOutlined /></a>
									<a @click="deleteFile(index)"><DeleteOutlined /></a>
								</div>
							</div>
						</div>
						<div class="upload-btn" v-if="fileList.length<5" @click="uploadFile">
							<div>
								<PlusOutlined />
								<p>上传</p>
							</div>
						</div>
					</div>
					<template #footer>
						<div class="modal-btn">
							<a-button type="default" shape="round" @click="closeModal()">取消</a-button>
							<a-button type="primary" shape="round" @click="confirm()">确定</a-button>
						</div>
					</template>
				</a-modal>
			</div>
		</div>
	</div>
</template>
<script>
import { Input, message, Modal, Select, Table, Tag } from "ant-design-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import httpRequest from "@/util/httpRequest";
import {
  PlusOutlined,
  DownloadOutlined,
  DeleteOutlined,
  EyeOutlined
} from "@ant-design/icons-vue";
import Upload from "@/util/upload";
export default {
  components: {
    ASelect: Select,
    ASelectOption: Select.Option,
    AInputSearch: Input.Search,
    ATable: Table,
    ATag: Tag,
    PlusOutlined,
    DownloadOutlined,
    DeleteOutlined,
    EyeOutlined
  },
  setup() {
    const store = useStore();
    //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
    store.dispatch("setBreadcrumb", { text: "漏洞管理", isBack: false });
    const dataSource = ref([]);
    const columns = reactive([
      {
        title: "通报对象",
        dataIndex: "firmName",
        key: "firmName"
      },
      {
        title: "所属辖区",
        dataIndex: "psName",
        key: "psName",
        slots: { customRender: "psName" }
      },
      {
        title: "执行人",
        dataIndex: "dpContactName",
        key: "dpContactName"
      },
      {
        title: "整改通知书",
        dataIndex: "reportDoc",
        key: "reportDoc",
        slots: { customRender: "reportDoc" }
      },
      {
        title: "处置反馈",
        dataIndex: "reportFile",
        key: "reportFile",
        slots: { customRender: "reportFile" }
      },
      {
        title: "处理状态",
        dataIndex: "status",
        key: "status",
        slots: { customRender: "status" }
      }
      // {
      //   title: "操作",
      //   key: "status",
      //   slots: { customRender: "action" },
      //   align: "right"
      // }
    ]);
    const filter = reactive({
      inspectLevel: "",
      natureTypeId: "",
      status: "",
      psId: "",
      keywords: ""
    });
    const pagination = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
      showTotal: (total) => `共计：${total}条通报`
    });
    const download = id => {
      console.log(id);
    };
    const roleId = JSON.parse(localStorage.getItem("roleId"));
    const user = JSON.parse(localStorage.getItem("user"));
    const roleOptions = JSON.parse(localStorage.getItem("roleOptions"));
    return {
      user,
      roleId,
      filter,
      pagination,
      dataSource,
      columns,
      download,
      roleOptions,
      visible: ref(false),
      isLoading: ref(false)
    };
  },
  data() {
    return {
      natureTypeIds: [],
      roleList: [],
      timer: null,
      activeItem: {},
      fileList: []
    };
  },
  mounted() {
    if (this.roleId == 1) {
      httpRequest.post("角色集合", {}).then(res => {
        this.roleList = res.data.list.filter(e => e.id !== 1);
      });
    }
    this.filter.keywords = this.$route.query.firmName
      ? this.$route.query.firmName
      : "";
    httpRequest.post("企业性质集合(用于选择框)", {}).then(res => {
      this.natureTypeIds = res.data.list;
    });
    this.getList();
  },
  methods: {
    getList() {
      console.log("通报列表:", this.filter);
      this.isLoading = true;
      httpRequest
        .post("通报列表", { ...this.filter, pageNo: this.pagination.current })
        .then(res => {
          this.dataSource = res.data.list;
          this.timer =
            this.dataSource.length > 0 ? this.dataSource[0].createTime : null;
          this.pagination.total = res.data.total;
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleTableChange(page) {
      this.pagination.current = page.current;
      this.getList();
    },
    tongbao(id) {
      Modal.confirm({
        title: "系统提示",
        content: "确认发布通报？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", { id, status: "Reported", reportFile: "" })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                this.visible = false;
                res();
              });
          });
        }
      });
    },
    chuli(id) {
      Modal.confirm({
        title: "系统提示",
        content: "确认处理？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", { id, status: "Handled", reportFile: "" })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                res();
              });
          });
        }
      });
    },
    upload(item) {
      this.activeItem = item;
      this.visible = true;
      this.fileList = [];
    },
    uploadFile() {
      Upload.Single({}, () => {}).then(res => {
        if (res.status === "0") {
          this.fileList.push({ ...res.file, filePath: res.data.url });
          console.log(res);
        } else {
          message.error(res.message);
        }
      });
    },
    confirm() {
      httpRequest
        .post("处理漏洞", {
          id: this.activeItem.id,
          status: "Uploaded",
          reportFile: this.fileList.map(e => e.filePath).join(",")
        })
        .then(() => {
          this.getList();
        });
    },
    sure(id) {
      Modal.confirm({
        title: "系统提示",
        content: "确认进行此操作？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", { id, status: "Confirmed", reportFile: "" })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                res();
              });
          });
        }
      });
    },
    handleChange() {
      this.pagination.current = 1;
      this.getList();
    },
    del(item) {
      console.log(item.reportFile);
      Modal.confirm({
        title: "系统提示",
        content: "确认刪除反馈的隐患清零确认书？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", {
                id: item.id,
                status: "Handled",
                reportFile: item.reportFile
              })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                res();
              });
          });
        }
      });
    },
    deleteFile(index) {
      this.fileList.splice(index, 1);
    },
    closeModal() {
      this.visible = false;
    }
  }
};
</script>
<style lang="less" scoped>
.filter-box {
  .download-btn {
    float: right;
  }
}
.span-circle {
  display: flex;
  align-items: center;
  &:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin-right: 5px;
  }
  &.UnReported:before {
    background: #fe4e50;
  }
  &.Reported:before {
    background: #fcac2e;
  }
  &.Handled:before {
    background: #4687ff;
  }
  &.Uploaded:before {
    background: #15d8bf;
  }
  &.Confirmed:before {
    background: #14ce79;
  }
}
.cz-btn {
  font-size: 14px;
  color: #fff;
  padding: 0px 4px;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  margin-right: 5px;
  border: none;
  img {
    margin-right: 3px;
  }
  &.bgc1 {
    background: #fe4e50;
  }
  &.bgc2 {
    background: #fcac2e;
  }
  &.bgc3 {
    background: #4687ff;
  }
  &.bgc4 {
    background: #15d8bf;
  }
  &.bgc5 {
    background: #3ffc2e77;
    color: rgb(141, 141, 141);
  }
  &.bgc6 {
    background: #bab9dd;
    color: rgb(248, 248, 248);
  }
}
.upload-dialog {
  .upload-btn {
    display: flex;
    width: 64px;
    height: 64px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    justify-content: center;
    align-items: center;
    p {
      margin-bottom: 0;
    }
  }
  .upload-file-list {
    .file-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      margin-bottom: 4px;
      &:hover {
        background: #f6f6f6;
      }
      > img {
        width: 50px;
        height: 60px;
        margin-right: 20px;
      }
      p {
        margin-bottom: 0;
        text-align: left;
        flex-grow: 1;
      }
      > div {
        > a {
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
